

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="Description" content="华山牧创新创意营销大赛"/>
<meta name="Keywords" content="华山牧创新创意营销大赛"/>
<meta name="author" content="Tencent-TGideas">
<title>华山牧创新创意营销大赛</title>
<style type="text/css">
html{font-size: 16px; height:100%}
body,p,h1,h2,dl,dt,dd{margin: 0;padding: 0;font-size: 1rem;color: #FFF;}
img{border:0;}
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
ol,ul{list-style:none;}
.hid{width:0;height:0;overflow:hidden;text-indent:-9999px;}
body{font-family: Helvetica; height:100%;}
section{display: block;}

@font-face {font-family: 'invitation';src:url('webpages/wx/zkly/fonts/invitation.woff') format('woff'),url('webpages/wx/zkly/fonts/invitation.ttf') format('truetype');font-weight: normal;font-style: normal;}
[data-icon]:before {font-family: 'invitation';content: attr(data-icon);speak: none;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;}

.wrap h1,.sec01 h2{display: none;}
.wrap{position: relative; height:100%;width: 100%;overflow: hidden;}

.svg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index:2;-webkit-animation: opa_btm 3s linear;animation: opa_btm 3s linear;}

.bg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index:1;}
.bg .bg_sec{width: 100%;float: left;position: relative;overflow: hidden;/*min-height: 416px;*/}
.bg01{background: #EAEBED;}.bg02{background: #468E7C;}.bg03{background: #F79536;}.bg04{background: #5FA3FF;}.bg05{background: #05BD64;}.bg06{background: #2E3A5E;}.bg07{background: #E42E2D;}.bg08{background: #282E3D;}.bg09{background: #0D0D0D;}

.sec{z-index: 1;position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-transition:all 0.3s linear;-webkit-transform:translateY(0px);transition:all 0.3s linear;transform:translateY(0px);-webkit-backface-visibility:hidden;}
.sec section{overflow: hidden;position: relative;width: 100%;/*min-height: 416px;*/z-index: 3;-webkit-backface-visibility:hidden;}
.drag{-webkit-transition:none;transition:none;}

.sec01 span{background: url(webpages/wx/zkly/img/icon01.png) no-repeat;background-size: 341.5px;}
.ico_rea,.ico_com,.ico_fil,.ico_pla,.sec08 span{background: url(webpages/wx/zkly/img/icon02.png) no-repeat;background-size: 496px;}
.ico_naruto,.ico_roco,.ico_garen,.ico_tri08{background: url(webpages/wx/zkly/img/icon03.png) no-repeat;background-size: 169px;}

.sec01{overflow: hidden;z-index: 3;}
.bg01{background: #EAEBED url(webpages/wx/zkly/img/bg_01.jpg) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}
.bg02,.bg03,.bg04,.bg05{background: #EAEBED url(webpages/wx/zkly/img/bg_234.jpg) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}
.sec02{background: url(webpages/wx/zkly/img/bg_02.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}
.sec03{background: url(webpages/wx/zkly/img/bg_03.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}
.sec04,.sec05{background: url(webpages/wx/zkly/img/bg_04_05.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}

/* .bg02{background: #EAEBED url(webpages/wx/zkly/img/bg_02.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;} */
/* .bg03{background: #EAEBED url(webpages/wx/zkly/img/bg_02.jpg) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;} */

.sec01 span,.sec01 b{z-index: 3;position: absolute;display: block;}
.sec01 .ico_tri01{right: 50%;margin-right: 90px;top: 10%;width: 96px;height: 57px;background-position: -2px -8.5px;}
.sec01 .ico_tri02{left: 50%;margin-left: 80px;top: 18%;width: 64px;height: 60px;background-position: -108px -6.5px;}
.sec01 .ico_tri03{right: 50%;margin-right: 64px;top: 47%;width: 93px;height: 40px;background-position: -178px -16.5px;}
.sec01 .ico_tri04{right: 50%;margin-right: 70px;top: 14%;width: 77px;height: 82px;background-position: -2px -76px;}
.sec01 .ico_tri05{left: 50%;margin-left: 110px;top: 42%;width: 85px;height: 104px;background-position: -97.5px -76px;}
.sec01 .ico_tri06{right: 50%;margin-right: 95px;top: 64%;width: 63px;height: 93px;background-position: -202px -76px;}
.sec01 .ico_up{left: 50%;margin-left: 40px;top: 14%;width: 62px;height: 87px;background-position: -279.5px 0;}
.sec01 .start,.sec02 .start,.sec03 .start,.sec04 .start,.sec05 .start,.sec06 .start,.sec07 .start{position: absolute;left: 50%;margin-left: -17px;top: 93%;margin-top: -34px;width: 34px;height: 34px;}
.sec02 .start,.sec03 .start,.sec04 .start,.sec05 .start,.sec06 .start,.sec07 .start{top: 95%;}
.sec01 .start{background: rgba(160,160,160,0.9);border-radius: 100%;}
.sec01 .start b,.sec02 .start b,.sec03 .start b,.sec04 .start b,.sec05 .start b,.sec06 .start b,.sec07 .start b{position: absolute;left: 50%;margin-left: -10px;z-index: 3;font-size: 1.25rem;color: #FFF;text-align: center;line-height: 29px;-webkit-transform: rotate(180deg);transform: rotate(180deg);}

.sec01_show h2{-webkit-animation: opa 1.5s linear;animation: opa 1.5s linear;}
@-webkit-keyframes opa {0% {opacity: 0}}
@keyframes opa {0% {opacity: 0}}
.sec01_show .layer:nth-child(3){-webkit-animation: opa_scal 1.2s ease-in-out;animation: opa_scal 1.2s ease-in-out;}
.sec01_show .layer:nth-child(4){-webkit-animation: opa_scal 1.5s ease-in-out;animation: opa_scal 1.5s ease-in-out;}
@-webkit-keyframes opa_scal {0%,50% {-webkit-transform: scale(0);opacity: 0}}
@keyframes opa_scal {0%,50% {transform: scale(0);opacity: 0}}
.start{-webkit-animation: opa_btm 1.5s ease-in-out;animation: opa_btm 1.5s ease-in-out;}
@-webkit-keyframes opa_btm {0%,25% {opacity: 0;-webkit-transform: translate(0,20px);}}
@keyframes opa_btm {0%,25% {opacity: 0;transform: translate(0,20px);}}
.start b{-webkit-animation: start 1.5s infinite ease-in-out;animation: start 1.5s infinite ease-in-out;}
@-webkit-keyframes start {0%,30% {opacity: 0;-webkit-transform: rotate(180deg) translate(0,-10px);}60% {opacity: 1;-webkit-transform: rotate(180deg) translate(0,0);}100% {opacity: 0;-webkit-transform: rotate(180deg) translate(0,5px);}}
@keyframes start {0%,30% {opacity: 0;transform: rotate(180deg) translate(0,-10px);}60% {opacity: 1;transform: rotate(180deg) translate(0,0);}100% {opacity: 0;transform: rotate(180deg) translate(0,5px);}}

.sec02 .p{z-index: 2;position: absolute;left: 25%;margin-left: -70px;top: 18%;line-height: 3;}
.sec02 h2{font-size: 2.25rem;}
.sec02 p{font-size: 0.75rem;padding-left: 1rem;}
.sec02 p.label{font-size: 1.5rem;padding-left: 0.5rem;}
.sec02 p:nth-last-child(1){padding-left: 2rem;}
.sec02 .data{z-index: 2;font-size: 0.75rem;position: absolute;left: 50%;margin-left: -115px;top: 9%;text-decoration: underline;color: #78A89B;}
.ico_reader{z-index: 2;position: absolute;left: 50%;margin-left: -54px;top: 48%;display: block;}
.ico_rea{z-index: 1;position: absolute;left: 21px;top: 20px;display: block;width: 77px;height: 70px;background-position: -6.5px -9px;}
.ico_reader_cir{position: absolute;left: 0;top: 0;display: block;width: 90px;height: 90px;border: 15px solid #FFF;background: #FFC974;border-radius: 100%;}
.bg02 b{position: absolute;left: 50%;color: #3F826F;}
.bg02 .b_a{font-size: 1.75rem;margin-left: -95px;top: 60px;}
.bg02 .b_b{font-size: 1.75rem;margin-left: -125px;top: 150px;}
.bg02 .b_c{font-size: 1.75rem;margin-left: -25px;top: 180px;}
.bg02 .b_d{font-size: 6rem;margin-left: 50px;top: 65px;color: #418875;-webkit-transform: rotate(30deg);transform: rotate(30deg);}
.bg02 .b_e{font-size: 5rem;margin-left: 70px;top: 175px;}
.bg02 .b_f{font-size: 5rem;margin-left: 40px;top: 63%;}
.bg02 .b_g{font-size: 5rem;margin-left: 100px;top: 72%;}
.bg02 .b_h{font-size: 1.75rem;margin-left: -120px;top: 70%;}
.bg02 .b_i{font-size: 6rem;margin-left: -130px;top: 80%;}

/****/
.sec02 .p h2,.sec02 .p p,.sec02 .data,.sec04 .p h2,.sec04 .p p,.sec04 .data,.sec05 .data,.sec06 .p p{-webkit-transform: translate(50px,0);transform: translate(50px,0);opacity: 0;-webkit-transition: all 0.5s linear;transition: all 0.5s linear;}
.sec03 .p h2,.sec03 .p p,.sec05 .p h2,.sec05 .p p,.sec03 .data{-webkit-transform: translate(-50px,0);transform: translate(-50px,0);opacity: 0;-webkit-transition: all 0.5s linear;transition: all 0.5s linear;}
.sec04 .p h2,.sec03 .p h2,.sec05 .p h2{-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}
.sec02 .data{-webkit-transition: all 1s linear;transition: all 1s linear;}
.sec06_show .p p:nth-child(1){-webkit-transition: all 0.9s ease-in-out;transition: all 0.9s ease-in-out;}
.sec06_show .p p:nth-child(2){-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
.sec06_show .p p:nth-child(3){-webkit-transition: all 1.1s ease-in-out;transition: all 1.1s ease-in-out;}
.sec06_show .p p:nth-child(4){-webkit-transition: all 1.2s ease-in-out;transition: all 1.2s ease-in-out;}
.sec06_show .p p:nth-child(5){-webkit-transition: all 1.4s ease-in-out;transition: all 1.4s ease-in-out;}
.sec02_show .p h2,.sec02_show .p p,.sec02_show .data,.sec03_show .p h2,.sec03_show .p p,.sec03_show .data,.sec04_show .p h2,.sec04_show .p p,.sec04_show .data,.sec05_show .p h2,.sec05_show .p p,.sec05_show .data,.sec06_show .p p{-webkit-transform: translate(0,0);transform: translate(0,0);opacity: 1;}
/****/
.sec02 .ico_rea,.sec02 .ico_reader_cir{opacity: 0;}
.sec02_show .ico_rea{opacity:1;-webkit-animation: ico_reader_cir 1.3s linear;animation: ico_reader_cir 1.3s linear;}

.sec02_show .ico_reader_cir{opacity:1;-webkit-animation: ico_reader_cir 1s linear;animation: ico_reader_cir 1s linear;}
@-webkit-keyframes ico_reader_cir {0%,50% {opacity: 0;-webkit-transform: scale(0);}70% {opacity: 0.8;-webkit-transform: scale(1.5);}80% {opacity: 1;-webkit-transform: scale(0.8);}90% {-webkit-transform: scale(1.2);}}
@keyframes ico_reader_cir {0%,50% {opacity: 0;transform: translate(-80px,0);}}

.sec03 .p{z-index: 2;position: absolute;left: 50%;margin-left: -115px;top: 18%;line-height: 1.5;text-align: right;}
.sec03 h2{font-size: 2.25rem;}
.sec03 p{font-size: 0.75rem;padding-right: 1rem;}
.sec03 p:nth-last-child(1){padding-right: 2rem;}
.sec03 .data{z-index: 2;font-size: 0.75rem;position: absolute;left: 50%;margin-left: -120px;top: 84%;text-decoration: underline;color: #FBCEAD;}
.ico_comic{z-index: 3;position: absolute;left: 50%;margin-left: -49px;top: 38%;display: block;}
.ico_com{z-index: 1;position: absolute;left: 33px;top: 49px;display: block;width: 69px;height: 84px;background-position: -93px -2px;}
.ico_comic_tri01{font-size: 176px;position: absolute;left: 0px;top: 0px;color: #FFCA13;-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}
.ico_comic_tri02{font-size: 136px;position: absolute;left: 15px;top: 20px;color: #FFF5D9;-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}
.ico_naruto{z-index: 2;position: absolute;left: 50%;margin-left: -13px;top: 35%;display: block;width: 169px;height: 205px;}
.bg03 b{position: absolute;left: 50%;color: #EC8630;}
.bg03 .b_a{font-size: 3rem;margin-left: -140px;top: 20%;}
.bg03 .b_b{font-size: 3.5rem;margin-left: -140px;top: 70%;}
.bg03 .b_c{font-size: 3rem;margin-left: 110px;top: 10%;}

.sec03 .ico_com,.sec03 .ico_naruto,.sec03 .ico_comic_tri01,.sec03 .ico_comic_tri02{opacity: 0;}
.sec03_show .ico_com{opacity:1;-webkit-animation: ico_com 1s linear;animation: ico_com 1s linear;}
@-webkit-keyframes ico_com {0%,50%{-webkit-transform: translate(-60px,60px) scale(0);opacity: 0}70%{-webkit-transform: translate(0,0) scale(1.1);opacity: 1}80%{-webkit-transform: translate(0,0) scale(0.8);}100%{-webkit-transform: translate(0,0) scale(1);opacity: 1}}
@keyframes ico_com {0%,50%{transform: translate(-60px,60px) scale(0);opacity: 0}70%{transform: translate(0,0) scale(1.1);opacity: 1}80%{transform: translate(0,0) scale(0.8);}100%{transform: translate(0,0) scale(1);opacity: 1}}

.sec03_show .ico_comic_tri01{opacity:1;-webkit-animation: ico_comic_tri 0.5s ease-in;animation: ico_comic_tri 0.5s ease-in;}
.sec03_show .ico_comic_tri02{opacity:1;-webkit-animation: ico_comic_tri 0.4s ease-in;animation: ico_comic_tri 0.4s ease-in;}
@-webkit-keyframes ico_comic_tri {0%{-webkit-transform: translate(100px,-100px) rotate(-5deg);opacity: 0}60%{-webkit-transform: translate(40px,-40px) rotate(-5deg);opacity: 0.3}100%{-webkit-transform: translate(0,0) rotate(-5deg);opacity: 1}}
@keyframes ico_comic_tri {0%{transform: translate(100px,-100px) rotate(-5deg);opacity: 0}60%{transform: translate(40px,-40px) rotate(-5deg);opacity: 0.3}100%{transform: translate(0,0) rotate(-5deg);opacity: 1}}

.sec03_show .ico_naruto{opacity:1;-webkit-animation: naruto 1.5s ease-in-out;animation: naruto 1.5s ease-in-out;}
@-webkit-keyframes naruto {0%,50% {opacity: 0;-webkit-transform: translate(-80px,0);}}
@keyframes naruto {0%,50% {opacity: 0;transform: translate(-80px,0);}}

.sec04 .p{z-index: 4;position: absolute;left: 50%;margin-left: -101px;top: 19%;line-height: 1.5;}
.sec04 h2{font-size: 2.25rem;}
.sec04 p{font-size: 0.75rem;padding-left: 1rem;}
.sec04 p:nth-last-child(1){padding-left: 2rem;}
.sec04 .data{z-index: 2;font-size: 0.75rem;position: absolute;left: 50%;margin-left: 20px;top: 78%;text-decoration: underline;color: #BAD4FF;}
.ico_film{z-index: 3;position: absolute;left: 50%;margin-left: -112px;top: 45%;}
.ico_fil{z-index: 2;position: absolute;left: 14px;top: 6px;display: block;width: 77px;height: 77px;background-position: -165.5px -5.5px;}
.ico_film_squ{position: absolute;left: 0;top: 0;display: block;width: 72px;height: 72px;border: 15px solid #5FC5FF;background: #FFFFFF;-webkit-transform: rotate(-28deg);transform: rotate(-28deg);}
.ico_roco{z-index: 1;position: absolute;left: 50%;margin-left: 23px;top: 38%;display: block;width: 102px;height: 110px;background-position: -26.5px -212.5px;}
.bg04 .layer:nth-last-child(2){z-index: 3;}
.bg04 .layer:nth-last-child(1){z-index: 1;}
.bg04 b{position: absolute;left: 50%;color: #4C91FF;}
.bg04 .b_a{font-size: 3rem;margin-left: -148px;top: 40%;}
.bg04 .b_b{font-size: 12rem;margin-left: 55px;top: 60%;color: #559AFF;}
.bg04 .b_c{font-size: 3rem;margin-left: 80px;top: 20%;}

.sec04 .ico_roco{opacity: 0;}
.sec04 .ico_fil{opacity: 0;-webkit-transform: translate(60px,-30px) scale(0.8) rotate(-56deg);transform: translate(60px,-30px) scale(0.8) rotate(-56deg);-webkit-transition: all 0.7s linear;transition: all 0.7s linear;}
.sec04_show .ico_fil{opacity: 1;-webkit-transform: translate(0,0) scale(1) rotate(0);transform: translate(0,0) scale(1) rotate(0);}
.sec04 .ico_film_squ{opacity: 0;-webkit-transform: translate(60px,-30px) rotate(-64deg);transform: translate(60px,-30px) rotate(-64deg);-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}
.sec04_show .ico_film_squ{opacity: 1;-webkit-transform: translate(0,0) rotate(-28deg);transform: translate(0,0) rotate(-28deg);}
.sec04_show .ico_roco{opacity: 1;-webkit-animation: roco 1.1s ease-in-out;animation: roco 1.1s ease-in-out;}
@-webkit-keyframes roco {0%,60% {opacity: 0;-webkit-transform: translate(-100px,30px) scale(0.8);}}
@keyframes roco {0%,60% {opacity: 0;transform: translate(-100px,30px) scale(0.8);}}

.sec05 .p{z-index: 3;position: absolute;left: 50%;margin-left: -110px;top: 19%;line-height: 1.5;text-align: right;}
.sec05 h2{font-size: 2.25rem;}
.sec05 p{font-size: 0.75rem;padding-right: 1rem;}
.sec05 p:nth-last-child(1){padding-right: 2rem;}
.sec05 .data{z-index: 3;font-size: 0.75rem;position: absolute;left: 50%;margin-left: -118px;top: 85%;text-decoration: underline;color: #A5E0BC;}
.ico_player{z-index: 2;position: absolute;left: 50%;margin-left: -152px;top: 37%;display: block;}
.ico_pla{z-index: 1;position: absolute;left: 64px;top: 53px;display: block;width: 81px;height: 61px;background-position: -245px -13.5px;}
.ico_player_tri01{font-size: 176px;position: absolute;left: 0;top: 0px;color: #00FFA8;-webkit-transform: rotate(79deg);transform: rotate(79deg);}
.ico_player_tri02{font-size: 136px;position: absolute;left: 23px;top: 18px;color: #FFFFFF;-webkit-transform: rotate(79deg);transform: rotate(79deg);}
.ico_garen{position: absolute;left: 50%;margin-left: 26px;bottom: 10%;display: block;width: 115px;height: 92px;background-position: -19.5px -331.5px;}
.sec05 .layer:nth-last-child(2){z-index: 2;}
.sec05 .layer:nth-last-child(1){z-index: 3;}
.bg05 b{position: absolute;left: 50%;color: #04B65A;}
.bg05 .b_a{font-size: 3rem;margin-left: -148px;top: 40%;}
.bg05 .b_b{font-size: 5rem;margin-left: 61px;top: 30%;}
.bg05 .b_c{font-size: 3rem;margin-left: 119px;top: 60%;}

.sec05 .ico_player_tri01,.sec05 .ico_player_tri02,.sec05 .ico_pla,.sec05 .ico_garen{opacity: 0;}
.sec05_show .ico_pla{opacity: 1;-webkit-animation: ico_pla 1.6s linear;animation: ico_pla 1.6s linear;}
@-webkit-keyframes ico_pla{0%{-webkit-transform:  translate(0,0) rotate(-360deg) scale(0);opacity: 0}60%{-webkit-transform: translate(0,0) rotate(0) scale(1);opacity: 1}70%{-webkit-transform: translate(-30px,-30px) rotate(-30deg) scale(1);}80%{-webkit-transform: translate(0,0) rotate(0) scale(1);}}
@keyframes ico_pla{0%{transform:  translate(0,0) rotate(-360deg) scale(0);opacity: 0}60%{transform: translate(0,0) rotate(0) scale(1);opacity: 1}70%{transform: translate(-30px,-30px) rotate(-30deg) scale(1);}80%{transform: translate(0,0) rotate(0) scale(1);}}

.sec05_show .ico_player_tri01{opacity:1;-webkit-animation: ico_player_tri 0.4s ease-in;animation: ico_comic_tri 0.4s ease-in;}
.sec05_show .ico_player_tri02{opacity:1;-webkit-animation: ico_player_tri 0.5s ease-in;animation: ico_comic_tri 0.5s ease-in;}
@-webkit-keyframes ico_player_tri {0%{-webkit-transform: translate(-100px,100px) rotate(79deg);opacity: 0}60%{-webkit-transform: translate(-40px,40px) rotate(79deg);opacity: 0.3}100%{-webkit-transform: translate(0,0) rotate(79deg);opacity: 1}}

.sec05_show .ico_garen{opacity: 1;-webkit-animation: garen 1.6s ease-in-out;animation: garen 1.6s ease-in-out;}
@-webkit-keyframes garen {0%,40% {-webkit-transform: translate(10%,-10%) rotate(-40deg);opacity: 0;}60% {-webkit-transform: translate(-70%,-70%) rotate(-40deg);opacity: 1;}}
@keyframes garen {0%,40% {transform: translate(10%,-10%) rotate(-40deg);opacity: 0;}60% {transform: translate(-80%,-80%) rotate(-40deg);opacity: 1;}}

.sec06_bg{position: absolute;left: 50%;margin-left: -158.5px;top: 0;width: 317px;height: 387px;}
.sec06_bg:after{position: absolute;left: 0;top: 0;content: "";display: block;width: 317px;height: 387px;background: url(webpages/wx/zkly/img/bg_link.png) center 24px no-repeat;background-size: 317px;}
.sec06_bg:before{position: absolute;left: 28px;top: 79px;content: "";display: block;width: 263px;height: 263px;background: #2E3A5E;border-radius: 100%;}
.sec06 .p{position: absolute;left: 50%;margin-left: -66px;top: 31%;line-height: 1.5;}
.sec06 .ico_reader{position: absolute;left: 50%;margin-left: 85px;top: 115px;-webkit-transform: translate(-100px,100px) scale(0.55);transform: translate(-100px,100px) scale(0.55);}
.sec06 .ico_comic{position: absolute;left: 50%;margin-left: -15px;top: 13px;-webkit-transform: translate(0px,100px) scale(0.65) rotate(-17deg);transform: translate(0px,100px) scale(0.65) rotate(-17deg);}
.sec06 .ico_player{position: absolute;left: 50%;margin-left: -185px;top: 258px;-webkit-transform: translate(100px,0px) scale(0.6) rotate(-81deg);transform: translate(100px,0px) scale(0.6) rotate(-81deg);}
.sec06 .ico_film{position: absolute;left: 50%;margin-left: -33px;top: 319px;-webkit-transform: translate(0px,-100px) scale(0.7) rotate(-32deg);transform: translate(0px,-100px) scale(0.7) rotate(-32deg);}
.ico_more{position: absolute;left: 50%;margin-left: 84px;top: 258px;display: block;width: 55px;height: 31px;padding-top: 24px;background: #3E528F;border-radius: 100%;color: #6A8CDE;text-align: center;-webkit-transform: translate(-100px,-100px) scale(0.1);transform: translate(-100px,-100px) scale(0.1);}
.ico_more b{position: absolute;left: 50%;margin-left: -14px;top: 15px;display: block;width: 7px;height: 7px;border-radius: 100%;background: #6A8CDE;}
.ico_more b:before,.ico_more b:after{position: absolute;left: 10px;top: 0px;content: "";display: block;width: 7px;height: 7px;border-radius: 100%;background: #6A8CDE;}
.ico_more b:after{left: auto;left: 20px;}

.sec06 span{opacity: 0;}
.sec06_show span{opacity: 1;-webkit-transition: all 0.7s ease-in;transition: all 0.7s ease-in;}
.sec06_show .ico_reader{-webkit-transform: translate(0,0) scale(0.55);transform: translate(0,0) scale(0.55);}
.sec06_show .ico_comic{-webkit-transform: translate(0,0) scale(0.65) rotate(17deg);transform: translate(0,0) scale(0.65) rotate(17deg);}
.sec06_show .ico_player{-webkit-transform: translate(0,0) scale(0.6) rotate(-61deg);transform: translate(0,0) scale(0.6) rotate(-61deg);}
.sec06_show .ico_film{-webkit-transform: translate(0,0) scale(0.7) rotate(-2deg);transform: translate(0,0) scale(0.7) rotate(-2deg);}
.sec06_show .ico_more{-webkit-transform: translate(0,0) scale(1);transform: translate(0,0) scale(1);}


.sec07 .p1{position: absolute;left: 50%;margin-left: -149px;top: 17%;line-height: 1.5;}
.sec07 .p2{position: absolute;left: 50%;margin-left: -49px;top: 77%;line-height: 1.5;}
.sec07 .p2 p:nth-child(1){text-indent: 1rem;}
.ico_fans{position: absolute;left: 50%;margin-left: -17px;top: 23%;}
.ico_fans b{z-index: 2;position: absolute;left: 0;top: 0;display: block;width: 132px;height: 132px;background: #FFF;border-radius: 100%;font-size: 3.5rem;color: #000;font-weight: bold;line-height: 132px;text-indent: -7px;}
.ico_fans em{position: absolute;left: 0;top: 0;display: block;width: 132px;height: 132px;background: #FFF;border-radius: 100%;}
.ico_tri08{position: absolute;left: 50%;margin-left: -109px;top: 170px;width: 20px;height: 20px;background-position: -31.5px -443px;}

.bg07 b{font-size: 25rem;position: absolute;left: 50%;margin-left: -201px;bottom: -105px;color: #C7272C;}
.bg07 b:nth-child(1){z-index: 2;}
.bg07 b:nth-child(2){bottom: -76px;color: #D92F33;}
.sec07 .ico_tri08,.sec07 .p1 p,.sec07 .p2 p{opacity: 0;}
.sec07 .ico_fans{opacity: 0;-webkit-transform: translate(-100px,200px) scale(0);transform: translate(-100px,200px) scale(0);-webkit-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;}
.sec07_show .ico_fans{opacity: 1;-webkit-transform: translate(0,0) scale(1);transform: translate(0,0) scale(1);}
.sec07_show .ico_tri08{opacity: 1;-webkit-animation: ico_tri08 1.6s ease-in-out;animation: ico_tri08 1.6s ease-in-out;}
@-webkit-keyframes ico_tri08 {0% {opacity: 0;-webkit-transform: translate(-80px,100px) rotate(90deg);}50% {opacity: 1;-webkit-transform: translate(30px,30px) scale(1.6) rotate(-45deg);}}
@keyframes ico_tri08 {0% {opacity: 0;transform: translate(-80px,100px) rotate(90deg);}50% {opacity: 1;transform: translate(30px,30px) scale(1.6) rotate(-45deg);}}
.sec07_show .p1 p:nth-child(1),.sec07_show .p2 p:nth-child(1){opacity: 1;-webkit-animation: opa_top 1.5s ease-in-out;animation: opa_top 1.5s ease-in-out;}
.sec07_show .p1 p:nth-child(2),.sec07_show .p2 p:nth-child(2){opacity: 1;-webkit-animation: opa_top 1.6s ease-in-out;animation: opa_top 1.6s ease-in-out;}
.sec07_show .p1 p:nth-child(3),.sec07_show .p2 p:nth-child(3){opacity: 1;-webkit-animation: opa_top 1.7s ease-in-out;animation: opa_top 1.7s ease-in-out;}
@-webkit-keyframes opa_top {0%,75% {opacity: 0;-webkit-transform: translate(0,-20px);}}
@keyframes opa_top {0%,75% {opacity: 0;transform: translate(0,-20px);}}
.ico_fans em{-webkit-animation: ico_fans_bg 1.7s infinite ease-in-out;animation: ico_fans_bg infinite 1.7s ease-in-out;}
@-webkit-keyframes ico_fans_bg {0% {opacity: 1;-webkit-transform: scale(1);}100% {opacity: 0;-webkit-transform: scale(1.5);}}
@keyframes ico_fans_bg {0% {opacity: 1;transform: scale(1);}100% {opacity: 0;transform: scale(1.5);}}

.sec08 .layer span,.sec08 .p p{opacity: 0;}
.sec08 .p{text-align: center;line-height: 1.6;position: absolute;left: 0;top: 12%;width: 100%;overflow: hidden;z-index: 1;}
.sec08 .door{position: absolute;left: 20%;bottom: 0;width: 60%;height: 75%;background: #FFF;}
.sec08 .door span{position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;background: #282E3D;-webkit-transform: perspective(900px) rotate3d(0,1,0,20deg);-webkit-transform-origin:0% 50%;transform: perspective(900px) rotate3d(0,1,0,20deg);transform-origin:0% 50%;}
.sec08 .start{position: absolute;left: 50%;margin-left: -17px;top: 93%;margin-top: -34px;width: 34px;height: 34px;background: none;}
.sec08 .start b{position: absolute;left: 50%;margin-left: 7;z-index: 3;font-size: 1.25rem;color: #282E3D;text-align: center;line-height: 29px;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.sec08 .ico_tri09{display: block;position: absolute;left: 50%;margin-left: -110px;bottom: 120px;width: 39px;height: 27px;background-position: -330.5px -30px;}
.sec08 .ico_tri10{display: block;position: absolute;left: 50%;margin-left: -35px;bottom: 150px;width: 42px;height: 43px;background-position: -378px -30px;}
.sec08 .ico_tri11{display: block;position: absolute;left: 50%;margin-left: 62px;bottom: 67px;width: 67px;height: 60px;background-position: -428px -19.5px;}

.sec08_show .door span{opacity: 1;-webkit-transform: perspective(900px) rotate3d(0,1,0,82deg);-webkit-transform-origin:0% 50%;transform: perspective(900px) rotate3d(0,1,0,82deg);transform-origin:0% 50%;-webkit-animation: door 0.5s ease-in-out;animation: door 0.5s ease-in-out;}
@-webkit-keyframes door {0%,50% {-webkit-transform: perspective(900px) rotate3d(0,1,0,20deg);-webkit-transform-origin:0% 50%;}}
@keyframes door {0%,50% {transform: perspective(900px) rotate3d(0,1,0,20deg);transform-origin:0% 50%;}}
.sec08_show .layer .ico_tri09{-webkit-animation: ico_tri09 1.5s ease-in;animation: ico_tri09 1.5s ease-in;opacity: 1;}
@-webkit-keyframes ico_tri09 {0%,80% {-webkit-transform: scale(0);opacity: 0;left: 70%;}100% {-webkit-transform: scale(1);opacity: 1;left: 50%;}}
@keyframes ico_tri09 {0%,80% {transform: scale(0);opacity: 0;left: 70%;}100% {transform: scale(1);opacity: 1;left: 50%;}}
.sec08_show .layer .ico_tri10{-webkit-animation: ico_tri10 1.7s ease-in-out;animation: ico_tri10 1.7s ease-in-out;opacity: 1;}
@-webkit-keyframes ico_tri10 {0%,80% {-webkit-transform: scale(0);opacity: 0;left: 60%;}100% {-webkit-transform: scale(1);opacity: 1;left: 50%;}}
@keyframes ico_tri10 {0%,80% {transform: scale(0);opacity: 0;left: 60%;}100% {transform: scale(1);opacity: 1;left: 50%;}}
.sec08_show .layer .ico_tri11{-webkit-animation: ico_tri11 1.6s ease-in-out;animation: ico_tri11 1.6s ease-in-out;opacity: 1;}
@-webkit-keyframes ico_tri11 {0%,80% {-webkit-transform: scale(0);opacity: 0;left: 30%;}100% {-webkit-transform: scale(1);opacity: 1;left: 50%;}}
@keyframes ico_tri11 {0%,80% {transform: scale(0);opacity: 0;left: 30%;}100% {transform: scale(1);opacity: 1;left: 50%;}}

.sec08_show .p p:nth-child(1){opacity: 1;-webkit-animation: opa_top 0.8s linear;animation: opa_top 0.8s linear;}
.sec08_show .p p:nth-child(2){opacity: 1;-webkit-animation: opa_top 1s linear;animation: opa_top 1s linear;}

.sec09{padding: 20px;box-sizing: border-box;background: url(webpages/wx/zkly/img/bg_end.jpg) center top no-repeat;background-size: 100%;}
.sec09 h2{padding-bottom: 10px;}
.sec09 .p{overflow: hidden;margin-bottom: 5px;border-top: 1px solid rgba(255,255,255,0.1);border-bottom: 1px solid rgba(255,255,255,0.1);}
.sec09 .p span{display: block;float: left;}
.sec09 .p strong{display: block;}
.sec09 .p a{display: block;color: #FFFFFF;text-decoration: none;font-size: 1.25rem;}
.sec09 .p a:link,.sec09 .p a:visited,.sec09 .p a:hover,.sec09 .p a:active{color: #FFF;}
.time{font-size: 0.75rem;padding: 10px 10px 15px 5px;border-right: 1px solid rgba(255,255,255,0.1);}
.time strong{font-size: 34px;}
.addr{font-size: 0.75rem;padding: 15px 5px 10px 15px;}
.addr strong{font-size: 18px;padding-top: 5px;}
.copyright{position: absolute;left: 0;bottom: 10px;width: 100%;font-size: 0.75rem;text-align: center;-webkit-transform:scale(0.875);}
.sec09 .lookforward{padding-top: 15px;}
.sec09 .lookforward strong{display: block;font-size: 1.25rem;}
.sec09{opacity: 0;-webkit-transition: opacity 0.3s linear;transition: opacity 0.3s linear;}
.sec09_show{opacity: 1;}
.sec09_show h2,.sec09_show .p{opacity: 1;-webkit-animation: opa_top 0.8s linear;animation: opa_top 0.8s linear;}
.sec09_show #container{opacity: 1;-webkit-animation: opa_top 1s linear;animation: opa_top 1s linear;}
.sec09_show .lookforward{opacity: 1;-webkit-animation: opa_top 1.1s linear;animation: opa_top 1.1s linear;}
.sec09_show .copyright{opacity: 1;-webkit-animation: opa_top 1.2s linear;animation: opa_top 1.2s linear;}
#container{width:100%;height:160px; }
@media screen and (max-height: 415px) {
  .bg01 .bg{background-position: center -85px;}
  .sec01 .ico_up{top: 0;}
  .sec02 .p{top: 13%;}
  .sec03 .p{top: 13%;}
  .ico_comic{margin-left: -110px;}
  .sec04 .p{top: 9%;}
  .ico_film{top: 50%;}
  .sec05 .p{top: 13%;}
  .sec06 .p{top: 38%;}
  .sec08 .door{left: 30%;width: 40%;height: 66%;}
  .sec09 .p{margin-bottom: 5px;}
  .time{padding-top:0;padding-bottom:0;}
  .addr{padding-top:5px;padding-bottom:0;}
  .sec09 .lookforward{padding-top: 5px;}
#container{width:260px;height:140px;  float:left;margin:10px 20px 0 0;}
}
div.txt {
	position: absolute;top: 60%;width:100%;display: block;background: url(webpages/wx/zkly/img/xy.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}
input.form-input0 {
	width: 70%;
    margin-left: 25%;
    border: none;
    height: 45px;
    text-align: left;
    color: #fff;
    background: none;
    margin-bottom: 10px;
    font-size: 1.0em;
}

input.form-input1 {
	width: 75%;
    margin-left: 20%;
    border: none;
    height: 35px;
    text-align: left;
    color: #fff;
    background: none;
    margin-bottom: 10px;
    font-size: 1.0em;
}


input.form-input2{
    width: 66%;
    margin-left: 32%;
    border: none;
    height: 35px;
    text-align: left;
    color: #fff;
    background: none;
    margin-bottom: 10px;
    font-size: 1.0em;
}
div.txt1 
{
	position: absolute;top: 26%;width:100%;display: block;background: url(webpages/wx/zkly/img/school.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}

div.txt2 
{
	position: absolute;top: 33%;width:100%;display: block;background: url(webpages/wx/zkly/img/name.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}

div.txt3 
{
	position: absolute;top: 40%;width:100%;display: block;background: url(webpages/wx/zkly/img/tel.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}
div.txt4 
{
	position: absolute;top: 47%;width:100%;display: block;background: url(webpages/wx/zkly/img/grade.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}
div.txt5 
{
	position: absolute;top: 54%;width:100%;display: block;background: url(webpages/wx/zkly/img/id.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}
div.txt6 
{
	position: absolute;top: 61%;width:100%;display: block;text-align: center;
}
div.txt7 
{
	position: absolute;top: 70.5%;width:100%;display: block;text-align: center;
}
div.txt7 p
{
	font-size: 14px;color:#fee733;
}
.bm-btn {
	background: url(webpages/wx/zkly/img/bm-btn.png) center top no-repeat;
    background-size: 100% 100%;
    height: 60px;
    width: 70%;
    border: none;
}

#end-bg{  
    position: fixed;  
    width: 100%;  
    height: 100%;  
    background: rgba(0,0,0,0.2);  
    display: none;  
}  

#BgDiv1{background-color:#000; position:absolute; z-index:9999;  display:none;left:0px; top:0px; width:100%; height:100%;opacity: 0.6; filter: alpha(opacity=60);}
.DialogDiv{position:absolute;z-index:99999;}/*配送公告*/
.U-user-login-btn{ display:block; border:none; background:url(webpages/wx/pzsw/images/bg_mb_btn1_1.png) repeat-x; font-size:1em; color:#efefef; line-height:49px; cursor:pointer; height:53px; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;}
.U-user-login-btn:hover, .U-user-login-btn:active{ display:block; border:none; background:url(webpages/wx/pzsw/images/bg_mb_btn1_1_h.png) repeat-x; font-size:1em; color:#efefef; line-height:49px; cursor:pointer; height:53px; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;}
.U-user-login-btn2{ display:block; border:none;background:url(webpages/wx/pzsw/images/bg_mb_btn1_1_h.png) repeat-x;   font-size:1em; color:#efefef; line-height:49px; cursor:pointer; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;height:53px;}
.U-guodu-box { padding:5px 15px;  background:#3c3c3f; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;  min-heigh:200px; border-radius:10px;}
.U-guodu-box div{ color:#fff; line-height:20px; font-size:12px; margin:0px auto; height:100%; padding-top:10%; padding-bottom:10%;}

input#uploadFile{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}
</style>
</head>
<body onload="init();">
    <div class="wrap" id="scene">
        <h1>华山牧创新创意营销大赛</h1>
        <div class="sec">
            <div class="bg">
                <div class="bg_sec bg01"></div>
                <div class="bg_sec bg02"></div>
                <div class="bg_sec bg03"></div>
                <div class="bg_sec bg04"></div>
                <div class="bg_sec bg05"></div>
            </div>
            
            <section class="sec01 sec01_show" style="display:;">
                <span class="start"><b aria-hidden="true" data-icon="1"></b></span>
            </section>
            <section class="sec02 " style="display:;">
                <span class="start"><b aria-hidden="true" data-icon="1"></b></span>
            </section>
             <section class="sec03" style="display:;">
                <span class="start"><b aria-hidden="true" data-icon="1"></b></span>
            </section>
            <form id="formInfo" enctype="multipart/form-data">
            <section class="sec04" style="display:;">
				<span style="z-index: 2;position: absolute;left: 50%;margin-left: -54px;top: 38%;display: block;">
                    <input type="file" name="filedata" id="uploadFile" onchange="changeFile()">
                    <span id="uploadImg" onclick="uploadFile.click();" style="position: absolute;left: 0;top: 0;display: block;width: 95px;height: 105px;background: url(webpages/wx/zkly/img/upload.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;"></span>
                </span>
                <div class="txt">
                	<input type="hidden" value="" id="imgUrl"/>
                    <input type="text" maxlength="16" id="speak" class="form-control form-input0" name="speak" placeholder="" value="" required="" >
                </div>
             	<span class="start"><b aria-hidden="true" data-icon="1"></b></span>
            </section>
             </form>
             <section class="sec05" style="display:;">
             	<div class="txt1">
                    <input type="text" maxlength="25" class="form-control form-input1" id="school" name="school" placeholder="" value="" required="" >
                </div>
                <div class="txt2">
                	<input type="text" maxlength="16" class="form-control form-input1" id="name" name="name" placeholder="" value="" required="" >
                </div>
                <div class="txt3">
                   <input type="text" maxlength="16" class="form-control form-input1" id="telphone" name="telphone" placeholder="" value="" required="" >
                </div>
                <div class="txt4">
                	<input type="text" maxlength="18" class="form-control form-input1" id="grade" name="grade" placeholder="" value="" required="" >
                </div>
                <div class="txt5">
                	<input type="text" maxlength="18" class="form-control form-input2" id="identityNo" name="identityNo" placeholder="" value="" required="" >
                </div>
                <div class="txt6">
                   <button class="bm-btn" onclick="end()"></button>
                </div>
                <div class="txt7">
                	<p>
                	以上信息用于去牧场当天坐大巴给各位买保险
                	</p>
                	<p>
                	请放心填写
                	</p>
                </div>
                <div id="end-bg" onclick="hideShow()">
					<div style="background: url(webpages/wx/zkly/img/end.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;height: 100%;"></div>
				</div>
            </section>
           
    </div>
    
     <div class="DialogDiv"  style="display:none; ">
              <div class="U-guodu-box">
              <div>
              <table width="100%" cellpadding="0" cellspacing="0" border="0" >
                  <tr><td  align="center"><img src="webpages/wx/pzsw/images/loading.gif"></td></tr>
                  <tr><td  valign="middle" align="center" >数据处理中，请稍后！</td></tr>
              </table>
              </div>
     </div>
</body>
<script src="webpages/wx/zkly/js/parallax.js"></script>
<!-- <script src="webpages/wx/zkly/js/zepto.min.js"></script> -->
<script src="webpages/wx/zkly/js/ping_tcss_ied.js"></script>
<script src="webpages/wx/zkly/js/jquery-1.12.4.min.js"></script>
<script src="webpages/wx/zkly/js/ajaxfileupload.js"></script>
<script>
function AddRunningDiv() {
// 	$("#BgDiv1").css({ display: "block", height: $(document).height() });
	var yscroll = document.documentElement.scrollTop;
	var screenx=$(window).width();
	var screeny=$(window).height();
    $(".DialogDiv").css("display", "block");
	 $(".DialogDiv").css("top",yscroll+"px");
	 var DialogDiv_width=$(".DialogDiv").width();
	 var DialogDiv_height=$(".DialogDiv").height();
	  $(".DialogDiv").css("left",(screenx/2-DialogDiv_width/2)+"px")
	 $(".DialogDiv").css("top",(screeny/2-DialogDiv_height/2)+"px")
	 $("body").css("overflow","hidden");
}

function MoveRunningDiv() {
	$(".DialogDiv").css({ display: "none"});
}
function changeFile() {
	var uploadFile = document.getElementById("uploadFile");
	file = uploadFile.files[0];
	if (file === null || file === undefined) { 
		alert("请选择您要上传的文件！"); 
	}
	var fileName = file.name;
	var extStart=fileName.lastIndexOf(".");
	var ext=fileName.substring(extStart,fileName.length).toUpperCase();
	if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
		alert("图片限于png,gif,jpeg,jpg格式");
		return;
	}
	
	var fileSize = file.size;
	
	//计算文件大小 
	var size = Math.floor(fileSize/1024); 
	if (size > 5024) { 
		alert("上传文件不得超过5M!"); 
		return false; 
	}; 
	
	
	AddRunningDiv();
	$.ajaxFileUpload
    (
        {
            url: 'zkly.action?upload&uuid=${uuid!}', //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: 'uploadFile', //文件上传域的ID
            dataType: 'JSON', //返回值类型 一般设置为json
            success: function (data, status)  //服务器成功响应处理函数
            {
				MoveRunningDiv();
				console.log(1);
				console.log(data);
				var d = $.parseJSON(data);
				$('#imgUrl').val(d.obj);
				$('#uploadImg').css("background","url("+d.obj+") center top no-repeat");
				$('#uploadImg').css("background-size","100% 100%");
				$('#uploadImg').css("-moz-background-size","100% 100%");
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
            	MoveRunningDiv();
//             	alert();
            }
        }
    )
}

// function IsPC()  
// {  
//            var userAgentInfo = navigator.userAgent;  
//            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
//            var flag = true;  
//            for (var v = 0; v < Agents.length; v++) {  
//                if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
//            }  
//            return flag;  
// }

// var jumpPc = IsPC();
// if(jumpPc!=false){
// window.location.href = "http://up.qq.com";
// }

document.body.addEventListener('touchstart', function (e) {
    //console.log("target:"+e.target.className);
    e = e.changedTouches[0];
    onStart(e);
});

document.body.addEventListener('touchmove', function (e) {
    onMove(e.changedTouches[0], e);
});

document.body.addEventListener('touchend', function (e) {
    onEnd(e.changedTouches[0]);
});

// 翻转的绑定
window.onorientationchange = orientationChange;

function initPage(){
	pageWidth = $(window).width();
	pageHeight = $(".wrap").height();
	pages = $(".wrap section");
	$(".bg .bg_sec").css("height",pageHeight);
    var bg_sec_height = $('.bg .bg_sec').height();
    $(".svg").css("height",bg_sec_height*8);

    $(".wrap section").css({
        "width":pageWidth+"px",//"height":$(".wrap").height()+"px"
        "height":pageHeight+"px"
    });
    //$(".wrap").height($(".wrap").height());

    secHeight = pageHeight * $(".wrap section").length;
    lineHeight = 832 * secHeight / pageHeight;

    $(".sec, .line").addClass("drag");
    animatePage(curPage);
    //$(".sec, .line").removeClass("drag");

}

function orientationChange(){
	initPage();
}

// 以下是拖动效果
var startX = 0,
    startY = 0;
    margin = 0;
var pages = null;
var curPage = 0;
var pageWidth = 0,
    pageHeight = 0;
var lineHeight = 0, secHeight = 0;
var targetElement = null;
var scrollPrevent = false, movePrevent = false, touchDown = false;

$(document).ready(function(){
	initPage();
});

function onStart (e) {
    if(movePrevent == true){
        event.preventDefault();
        return false;
    }
    if($(e.target).parents("#container").length==1){
        scrollPrevent = true;
    }else{
        scrollPrevent = false;
    }

    $(".map").on('click', function(e){
    	$(".map_show").addClass("show");
    })

    if(!$(e.target).parents("#container").length==1){
	    $(".map_show").removeClass("show");
    }

    touchDown = true;

    // 起始点，页面位置
    startX = e.pageX;
    startY = e.pageY;
    //margin = parseInt($(".sec").css("top"));
    //-webkit-transform:translateY(0px)

    //matrix(1, 0, 0, 1, 0, 8)

    $(".sec, .line").addClass("drag");

    margin = $(".sec").css("-webkit-transform");
    //margin = "matrix(1, 0, 0, 1, 0, -50)";
    margin = margin.replace("matrix(", "");
    margin = margin.replace(")", "");
    margin = margin.split(",");
    margin = parseInt(margin[5]);
}

function onMove (e, oe) {
    if(movePrevent == true || touchDown != true){
        event.preventDefault();
        return false;
    }
    event.preventDefault();
    if( scrollPrevent==false && e.pageY!=startY){
        var temp = margin + e.pageY - startY;
        $(".sec").css("-webkit-transform", "matrix(1, 0, 0, 1, 0, "+temp+")");
        var b =  lineHeight / secHeight * temp;
        $(".line").css("-webkit-transform", "matrix(1, 0, 0, 1, 0, "+b+")");
    }
}

function onEnd (e) {
    if(movePrevent == true){
        event.preventDefault();
        return false;
    }

    touchDown = false;

    if( scrollPrevent==false ){
        // 抬起点，页面位置
        endX = e.pageX;
        endY = e.pageY;
        // swip 事件默认大于50px才会触发，小于这个就将页面归回
        if( Math.abs(endY-startY)<=50) {
            animatePage(curPage);
        }else{
        	if(endY>startY){
        		prevPage();
        	}else{
        		nextPage();
        	}
        }
    }

    $(".sec, .line").removeClass("drag");
}

function prevPage(){
    var newPage = curPage - 1;
    animatePage(newPage);
//     alert('上一页，当前页：'+curPage);
    
}
function nextPage(){
    var newPage = curPage + 1;
    
//     alert('下一页，当前页：'+curPage);
	var check = true;
	if(curPage==3) {
		//判断是否上传图片和宣言信息
		var imgUrl = $('#imgUrl').val();
		var speak = $('#speak').val();
		if(!imgUrl) {
			check = false;
			alert('请上传照片');
		} else if(!speak) {
			check = false;
			alert('请填写宣言');
		}
		
	}
	
	//
	if(curPage==4) {
		
	}
	
	if(check) {
		animatePage(newPage);
	} else {
		animatePage(curPage);
	}
	
}

function animatePage( newPage ){
    if(newPage<0){
        newPage = 0;
    }
    if(newPage>$(".wrap section").length-1){
        newPage = $(".wrap section").length-1;
    }

    curPage = newPage;
    var newMarginTop = newPage * (-pageHeight);
    $(".sec").css({
        "-webkit-transform" : "matrix(1, 0, 0, 1, 0, "+newMarginTop+")"
    });

    var newTop = -parseInt(curPage*pageHeight*(lineHeight/secHeight));
    $(".line").css({
        "-webkit-transform" : "matrix(1, 0, 0, 1, 0, "+newTop+")"
    });

    movePrevent = true;
    setTimeout("movePrevent=false;", 300 );

    // 每页动画
    if( !$(pages[curPage]).hasClass("sec0" + (curPage+1) + "_show") ){
        $(pages[curPage]).addClass("sec0" + (curPage+1) + "_show");
    }
    $(pages[curPage-1]).removeClass("sec0" + (curPage) + "_show");
    $(pages[curPage+1]).removeClass("sec0" + (curPage+2) + "_show");

}


// 视差
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

//map
var init = function() {
}
//执行
document.addEventListener('WeixinJSBridgeReady', function() {
//     onBridgeReady();
});
</script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>    
<script>
/***用户打开页面的时候就加载**/
setWxConfig();

function setWxConfig() {
	//通过config接口注入权限验证配置
	wx.config({
		 debug: false, 
	    appId: '${appId}', 
	    timestamp: '${timestamp}', 
	    nonceStr: '${nonceStr}', 
	    signature: '${signature}',
	    jsApiList: ['checkJsApi','onMenuShareTimeline', 'onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] 
	});
	
	var titleWx =  "华山牧创新创意营销大赛";
	var descWx =  "华山牧创新创意营销大赛在线报名申请";
	var imgUrlWx = "http://www.jmax4you.com/jmax/webpages/wx/zkly/img/bg_04_05.png";
	var linkWx = "http://www.jmax4you.com/jmax/indexZkly.action";
	
	wx.ready(function(){
	 	//分享给朋友
	 	wx.onMenuShareAppMessage({
	 	    title: titleWx + '', // 分享标题
	 	    desc: descWx + '', // 分享描述
	 	    link: linkWx + '', // 分享链接
	 	    imgUrl: imgUrlWx + '', // 分享图标
	 	    success: function () { 
	 	        // 用户确认分享后执行的回调函数
	// 	        successFcWx();
	 	    },
	 	    cancel: function () { 
	 	        // 用户取消分享后执行的回调函数
	// 	        cancleFcWx();
	 	    }
	 	});
		 
	 	//分享到朋友圈
	 	wx.onMenuShareTimeline({
	 	    title: titleWx, // 分享标题
	 	    link: linkWx, // 分享链接
	 	    imgUrl: imgUrlWx, // 分享图标
	 	    success: function () { 
	 	        // 用户确认分享后执行的回调函数
	 	    },
	 	    cancel: function () { 
	 	        // 用户取消分享后执行的回调函数
	 	    }
	 	});
		
	 	//分享到QQ
	 	wx.onMenuShareQQ({
	 		title: titleWx, // 分享标题
	 		desc: descWx, // 分享描述
	 		link: imgUrlWx, // 分享链接
	 		imgUrl: imgUrlWx, // 分享图标
	 	    success: function () { 
	 	   		// 用户确认分享后执行的回调函数
	// 	    	successFcWx();
	 	    },
	 	    cancel: function () { 
	 	    	// 用户取消分享后执行的回调函数
	// 	    	cancleFcWx();
	 	    }
	 	});
	});   
	
	
	
}
</script>

<script type="text/javascript">
	function end() {
		var check = true;
		var name = $('#name').val();
		var telphone = $('#telphone').val();
		var identityNo = $('#identityNo').val();
		var school = $('#school').val();
		var grade = $('#grade').val();
		if(!name) {
			check = false;
			alert('请填写姓名');
		} else if(!telphone) {
			check = false;
			alert('请填写电话');
		} else if(!identityNo) {
			check = false;
			alert('请填写身份证');
		} else if(!school) {
			check = false;
			alert('请填写院系');
		} else if(!grade) {
			check = false;
			alert('请填写年级');
		}
		//校验身份证号
		
		if(check) {
			check = isCardNo(identityNo);
			if(!check) {
				alert('请填写有效身份证号！');
				return;
			}
			
			check = isPoneAvailable(telphone);
			if(!check) {
				alert('请填写有效手机号！');
				return;
			}
			
			$.post("zkly.action?bm",
			  {
			    uuid:"${uuid!}",
			    name:name,
			    telphone:telphone,
			    identityNo:identityNo,
			    school:school,
			    gradeLevel:grade, 
			    imgUrl:$('#imgUrl').val(),
			    speak:$('#speak').val()
			  },
			  function(data,status){
				console.log(data);
			    if(data.success) {
			    	$('#end-bg').show();
			    } else {
			    	alert(data.msg);
			    }
			});
		}
		
		
	}
	function isPoneAvailable(str) {  
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
        if (!myreg.test(str)) {  
            return false;  
        } else {  
            return true;  
        }  
    }
	function isCardNo(card)  
	{  
	   // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
	   var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
	   if(reg.test(card) === false)  
	   {  
	       return  false;  
	   }  
	   return true;
	}  
	
	function hideShow() {
		$('#end-bg').hide();
		animatePage(0);
	}
	
	jQuery.extend({
        handleError: function (s, xhr, status, e) {
//         	debugger;
            if (s.error) {
                s.error.call(s.context || s, xhr, status, e);
            }
            if (s.global) {
                (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
            }
        },
        httpData: function (xhr, type, s) {
            var ct = xhr.getResponseHeader("content-type"),
    xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
    data = xml ? xhr.responseXML : xhr.responseText;
            if (xml && data.documentElement.tagName == "parsererror")
                throw "parsererror";
            if (s && s.dataFilter)
                data = s.dataFilter(data, type);
            if (typeof data === "string") {
                if (type == "script")
                    jQuery.globalEval(data);
                if (type == "json")
                    data = window["eval"]("(" + data + ")");
            }
            return data;
        }
    });
</script>

</html>